<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>英雄联盟</title>
		<link rel="stylesheet" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" href="ux_1472801352_544877/iconfont.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<style>
			body,
			ul{
				padding: 0;
				margin: 0;
			}
			/*轮播图片*/
			.swiper-slide img {
				width: 100%;
				height: 200px;
			}
			ul {
				list-style: none;
			}
			/*homeage ui-content start*/
			
			.infoList li {
				height: 100px;
				position: relative;
			}
			.infoList li a {
				
				display: block;
				height: 100px;
				width: 100%;
				font-size: 15px;
				background-color: white;
				margin-top: 5px;
			}
			.infoList li img {
				position: absolute;
				top: 10px;
				left: 10px;
				width: 100px;
				height: 80px;
			}
			.infoList li h3 {
				position: absolute;
				top: -10px;
				left: 120px;
				display: block;
				color: black;
			}
			.p1 {
				position: absolute;
				top: 17px;
				left: 120px;
				display: block;
				font-size: 14px;
				color: #bbb;
				font-weight: normal;
			}
			.p2 {
				position: absolute;
				top: 57px;
				left: 120px;
				display: block;
				font-size: 14px;
				color: #bbb;
			}
			/*homePage ui-content end*/
			/*homePage footer start*/
			
			.ui-footer {
				height: 56px !important;
			}
			.ui-footer ul {
				height: 40px;
				margin-top: 4px;
			}
			.ui-footer li {
				display: block;
				width: 25%;
				float: left;
				text-align: center;
			}
			.ui-footer li a {
				text-decoration: none;
				line-height: 25px;
			}
			.ui-footer li a:link,
			.ui-footer li a:hover,
			.ui-footer li a:active,
			.ui-footer li a:visited {
				color: #666;
			}
			#sy {
				color: coral;
			}
			.ui-footer li i,
			.ui-footer li span {
				display: block;
			}
			/*homePage footer end*/
			#special{
				height: 215px;
			}
			#special a{
				height: 215px;
				position: relative;
			}
			#special a h3{
				top: -10px;
				left: 10px;
			}
			#special .img{
				width: 78%;
				height: 125px;
				top: 60px;
			}
			#special #img1,
			#special #img2{
				position: absolute;
				width: 60px;
				height: 60px;
				left: 82%;
			}
			#special #img1{
				top: 60px;
			}
			#special #img2{
				top: 125px;
			}
			#special p{
				position: absolute;
				top: 15px;
				left: 10px;
			}
			#special .p2{
				top: 175px;
			}
		</style>
	</head>

	<body>
		<!--首页 时间、图集、头部fixed问题，从其他页面跳转回来需要重新刷新才能得到样式和数据-->
		<!--target = "_top"跳转是忽略框架，在整个页面打开跳转页面-->
		<div data-role="page">
			<!--header-->
			<div data-role="header">
				<div class="swiper-container">
					<div class="swiper-wrapper"></div>
				</div>
			</div>
			<!--header end-->

			<!--main content-->
			<div data-role="main" class="ui-content">
				<ul class="infoList">
					<!--<li id="special">
						<a href="#">
							<h3>五周年限定</h3>
							<p>五周年限定 电玩阿狸正式上线</p>
							<img src="http:\/\/ossweb-img.qq.com\/upload\/qqtalk\/news\/201609\/011611521277575_480.jpg">
							<img src="http:\/\/ossweb-img.qq.com\/upload\/qqtalk\/news\/201609\/011611521277676_480.jpg"/>
							<img src="http:\/\/ossweb-img.qq.com\/upload\/qqtalk\/news\/201609\/011611521281036_480.jpg" />
							<p class="p2">
								<span>十四小时前</span>
								<span>&nbsp;</span>
								<span style="color: burlywood;">237570阅</span>
							</p>
						</a>
					</li>-->
				</ul>
			</div>
			<!--main content end-->

			<!--footer-->
			<div data-role="footer" data-position="fixed">
				<ul>
					<li>
						<a href="index.html" id="sy" target="_top">
							<i class="icon iconfont">&#xe694;</i>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a href="allHeros.html" id="yx" target="_top" data-transition = "slide">
							<i class="icon iconfont">&#xe606;</i>
							<span>英雄</span>
						</a>
					</li>
					<li>
						<a href="wupinPage.html" id="wp" target="_top" data-transition = "slide">
							<i class="icon iconfont">&#xe628;</i>
							<span>物品</span>
						</a>
					</li>
					<li>
						<a href="#" id="wd" target="_top">
							<i class="icon iconfont">&#xe618;</i>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
			<!--footer end-->
		</div>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/artTemplate.js"></script>
		<script type="text/javascript" src="js/swiper.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
		<!--首页轮播-->
		<script type="text/html" id="lunboTemp">
			<div class="swiper-slide">
				<img src="{{image_url_big}}" />
			</div>
		</script>
		<script>
			$.ajax({
				type: "get",
				url: "json/lunbo.json",
				async: true,
				success: function(data) {
					$.each(data.list, function(i, val) {
						console.log(val);
						$(template("lunboTemp", val)).appendTo($(".swiper-wrapper"));
					});
					var swiper = new Swiper('.swiper-container', {
						paginationClickable: true,
						spaceBetween: 30,
						centeredSlides: true,
						autoplay: 2000,
						autoplayDisableOnInteraction: false
					});
				},
				error: function () {
					alert("数据请求错误");
				}
			});
		</script>
		<!--轮播end-->

		<!--首页信息列表-->
		<script type="text/html" id="infoListTemp">
			<li>
				<a href="{{article_url}}">
					<img class="img"  src="{{image_url_small}}">
					<h3>{{title}}</h3>
					<p class="p1">{{summary}}</p>
					<p class="p2">
						<span>十四小时前</span>
						<span>&nbsp;</span>
						<span style="color: burlywood;">{{pv}}阅</span>
					</p>
				</a>
			</li>
		</script>
		<script>
			$.ajax({
				type: "get",
				url: "json/news.json",
				async: true,
				success: function(data) {
					$.each(data.list, function(i, val) {
						var $li = $(template("infoListTemp", val));
						if(i == 3){
							$li.attr("id","special");
							var smallimg1 = data.list[3].small_image_url;
							var smallimg2 = data.list[3].count_image_url;
							var $img1 = $("<img id='img1' src='"+smallimg1 +"' />");
							var $img2 = $("<img id='img2' src='"+smallimg2+"' />");
							$img1.appendTo($li);
							$img2.appendTo($li);
						}
						$li.appendTo($(".infoList"));
					});
				}
			});
		</script>
		<!--信息列表 end-->
	</body>

</html>